<template>
	<view class="container">
			<view class="pay-Num">
					<view class="nummoney">
						￥ <span  style="font-size:60rpx;">{{Money}}.00</span> 
					</view>
					<view class="paytxt" v-if="current==2">需支付积分</view>
					<view class="paytxt" v-else>需支付金额</view>
			</view>
			<view class="choosetype">请选择支付方式</view>
			<view class="type-List">
	         <radio-group @change="radioChange">
							<label class="uni-list-cell" v-for="(item, index) in typeList" :key="item.value">			
								<view class="payfangshi">	<image class="pay-icon" :src="item.imgurl" mode=""></image>   {{item.name}}</view>
								<view>
									<radio  color="#000" :value="item.value"  :checked="index === current" style="transform:scale(0.8);"/>
				       	</view>
							</label>
	       </radio-group> 					
			</view>	
			
			<view class="paybtn" @click="paySuccess">立即支付</view>

	</view>
	
</template>

<script>
	export default {

		data() {
			return {
				typeList:[
					{value: 'WX',name: '微信',imgurl:'/static/image/Index/index-paywx.png',checked: 'true'},
					{value: 'ZFB',name: '支付宝',imgurl:'/static/image/Index/indexpayzfb.png'},
					{value: 'JF',name: '积分',imgurl:'/static/image/Index/index-jifen.png'},
				],
				current:0,
				Money:0,
				num:18

			}
		},
		methods: {
      radioChange(evt){
				this.Money = this.num
				for (let i = 0; i < this.typeList.length; i++) {
					 if (this.typeList[i].value === evt.detail.value) {
							this.current = i;
							break;
					}
				}
				if(evt.detail.value =='JF'){
					this.Money = this.num *10
				}

		},
		paySuccess(){
			console.log(this.current)
			console.log(this.Money)
			if(this.Money < 0){
			uni.showToast({
				title:'充值金额不能为0',
				icon:"none",
				duration:1000,
			})
			}else{
				let	data = { 
					money:this.Money,
					pay_type:this.pay_active,		
					method: 'app' 		
				}
				// uni.showLoading()
				console.log(data);
				// 调后台接口
				this.http.post('', data ,(res) =>{
					if(res.data.code == 200){
						if (this.current == 1) {
							this.WeChatPay(res.data.data)
						} else if(this.current == 2){
							this.ZfbPay(res.data.data)
						}else if(this.current ==3){
							this.JiFenPay(res.data.data)
						}
						
					}else{
						this.http.show(res.data.msg)
					}
				})
			}	

			 this.$helper.to('/pages/tabBar/index/paysuccess')
		},
		ZfbPay(payment){
			let that = this
			console.log(payment);
			uni.requestPayment({
			    "provider": "alipay", 
			    "orderInfo": payment,//.aliKey,
			    success(res) {
					uni.showToast({
						title:'支付成功',
						icon:"none",
						duration:1000,
					})
					setTimeout(function(){
					  this.$helper.to('/pages/tabBar/index/paysuccess')
					},1000)
				},
			    fail(e) {
						uni.showToast({
							title:'支付失败',
							icon:"none",
							duration:1000,
						})
					console.log(e);
					setTimeout(function(){
						uni.navigateBack()
					},1000)
				}
			})
		},
		// 微信支付
		WeChatPay(payment) {
			let _this = this
			console.log(payment);
			uni.requestPayment({
				provider: 'wxpay',
				appId:payment.appId,
				nonceStr:payment.nonceStr,
				package:payment.package,
				signType:payment.signType,
				paySign:payment.paySign,
				timeStamp:payment.timeStamp,
				success: function(res) {
					uni.showToast({
						title:'支付成功',
						icon:"none",
						duration:1000,
					})
					setTimeout(function(){
						this.$helper.to('/pages/tabBar/index/paysuccess')
					},1000)
				},
				fail: function(err) {
					console.log(err);
						uni.showToast({
							title:'支付失败',
							icon:"none",
							duration:1000,
						})
					setTimeout(function(){
						uni.navigateBack()
					},1000)
				}
			})
			
		},
		// 积分支付
		JiFenPay(payment){
			// 调后台接口
			this.http.post('', data ,(res) =>{
				
			})
		},
	},
}
</script>

<style lang="scss" scoped>
	page{
			background: #fff;
	}

.pay-Num{
	height:272rpx;
	text-align: center;
	border-bottom: 20rpx solid #f8f8f8;
}
.nummoney{
	font-size:36rpx;
	font-weight: bold;
	padding-top:80rpx;
}
.paytxt{
	color:#999;
	font-size: 28rpx;
	padding-top:8rpx;
}
.choosetype{
	margin-left:30rpx;
	margin-top:30rpx;
	font-weight: 500;
	font-size: 32rpx;
	color: #333333;
	
}

.type-List{
	margin: 30rpx;
}
.uni-list-cell{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top:30rpx;
}
.payfangshi{
	display: flex;
	align-items: center;
	font-size: 30rpx;
}
.pay-icon{
	width:50rpx;
	height:50rpx;
	margin-right:24rpx;
}
.paybtn{
	margin:0 auto;
	width:690rpx;
	height:90rpx;
	border-radius: 49rpx;
	background: #000;
	line-height: 90rpx;
	color:#FEC92F;
	font-size: 32rpx;
	text-align: center;
	margin-top:556rpx;
}


</style>